<html>
<head>
<meta charset="utf-8"/>
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"/>
<meta content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,viewport-fit=cover" name="viewport"/>
<meta content="telephone=no" name="format-detection"/>
<style type="text/css">

#watermark {

  position: relative;
  overflow: hidden;
}

#watermark .x {
  position: absolute;
  top: 800;
  left: 400;
  color: #3300ff;
  font-size: 50px;
  pointer-events: none;
  opacity:0.5;
  filter:Alpha(opacity=50);
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
}
    </style>
<style type="text/css">
 html{color:#333;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;text-rendering:optimizelegibility;font-family:Helvetica Neue,PingFang SC,Verdana,Microsoft Yahei,Hiragino Sans GB,Microsoft Sans Serif,WenQuanYi Micro Hei,sans-serif}html.borderbox *,html.borderbox :after,html.borderbox :before{box-sizing:border-box}article,aside,blockquote,body,button,code,dd,details,dl,dt,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hr,input,legend,li,menu,nav,ol,p,pre,section,td,textarea,th,ul{margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,menu,nav,section{display:block}audio,canvas,video{display:inline-block}body,button,input,select,textarea{font:300 1em/1.8 PingFang SC,Lantinghei SC,Microsoft Yahei,Hiragino Sans GB,Microsoft Sans Serif,WenQuanYi Micro Hei,Helvetica,sans-serif}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}blockquote{position:relative;color:#999;font-weight:400;border-left:1px solid #1abc9c;padding-left:1em;margin:1em 3em 1em 2em}@media only screen and (max-width:640px){blockquote{margin:1em 0}}abbr,acronym{border-bottom:1px dotted;font-variant:normal}abbr{cursor:help}del{text-decoration:line-through}address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:400}ol,ul{list-style:none}caption,th{text-align:left}q:after,q:before{content:""}sub,sup{font-size:75%;line-height:0;position:relative}:root sub,:root sup{vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}a{color:#1abc9c}a:hover{text-decoration:underline}.typo a{border-bottom:1px solid #1abc9c}.typo a:hover{border-bottom-color:#555;color:#555}.typo a:hover,a,ins{text-decoration:none}.typo-u,u{text-decoration:underline}mark{background:#fffdd1;border-bottom:1px solid #ffedce;padding:2px;margin:0 5px}code,pre,pre tt{font-family:Courier,Courier New,monospace}pre{background:hsla(0,0%,97%,.7);border:1px solid #ddd;padding:1em 1.5em;display:block;-webkit-overflow-scrolling:touch}hr{border:none;border-bottom:1px solid #cfcfcf;margin-bottom:.8em;height:10px}.typo-small,figcaption,small{font-size:.9em;color:#888}b,strong{font-weight:700;color:#000}[draggable]{cursor:move}.clearfix:after,.clearfix:before{content:"";display:table}.clearfix:after{clear:both}.clearfix{zoom:1}.textwrap,.textwrap td,.textwrap th{word-wrap:break-word;word-break:break-all}.textwrap-table{table-layout:fixed}.serif{font-family:Palatino,Optima,Georgia,serif}.typo-dl,.typo-form,.typo-hr,.typo-ol,.typo-p,.typo-pre,.typo-table,.typo-ul,.typo dl,.typo form,.typo hr,.typo ol,.typo p,.typo pre,.typo table,.typo ul,blockquote{margin-bottom:1rem}h1,h2,h3,h4,h5,h6{font-family:PingFang SC,Helvetica Neue,Verdana,Microsoft Yahei,Hiragino Sans GB,Microsoft Sans Serif,WenQuanYi Micro Hei,sans-serif;color:#000;line-height:1.35}.typo-h1,.typo-h2,.typo-h3,.typo-h4,.typo-h5,.typo-h6,.typo h1,.typo h2,.typo h3,.typo h4,.typo h5,.typo h6{margin-top:1.2em;margin-bottom:.6em;line-height:1.35}.typo-h1,.typo h1{font-size:2em}.typo-h2,.typo h2{font-size:1.8em}.typo-h3,.typo h3{font-size:1.6em}.typo-h4,.typo h4{font-size:1.4em}.typo-h5,.typo-h6,.typo h5,.typo h6{font-size:1.2em}.typo-ul,.typo ul{margin-left:1.3em;list-style:disc}.typo-ol,.typo ol{list-style:decimal;margin-left:1.9em}.typo-ol ol,.typo-ol ul,.typo-ul ol,.typo-ul ul,.typo li ol,.typo li ul{margin-bottom:.8em;margin-left:2em}.typo-ol ul,.typo-ul ul,.typo li ul{list-style:circle}.typo-table td,.typo-table th,.typo table caption,.typo table td,.typo table th{border:1px solid #ddd;padding:.5em 1em;color:#666}.typo-table th,.typo table th{background:#fbfbfb}.typo-table thead th,.typo table thead th{background:hsla(0,0%,95%,.7)}.typo table caption{border-bottom:none}.typo-input,.typo-textarea{-webkit-appearance:none;border-radius:0}.typo-em,.typo em,caption,legend{color:#000;font-weight:inherit}.typo-em{position:relative}.typo-em:after{position:absolute;top:.65em;left:0;width:100%;overflow:hidden;white-space:nowrap;content:"\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB"}.typo img{max-width:100%}.common-content{font-weight:400;color:#353535;line-height:1.75rem;white-space:normal;word-break:normal;font-size:1rem}.common-content img{display:block;max-width:100%;background-color:#eee}.common-content audio,.common-content video{width:100%;background-color:#eee}.common-content center,.common-content font{margin-top:1rem;display:inline-block}.common-content center{width:100%}.common-content pre{margin-top:1rem;padding-left:0;padding-right:0;position:relative;overflow:hidden}.common-content pre code{font-size:.8rem;font-family:Consolas,Liberation Mono,Menlo,monospace,Courier;display:block;width:100%;box-sizing:border-box;padding-left:1rem;padding-right:1rem;overflow-x:auto}.common-content hr{border:none;margin-top:1.5rem;margin-bottom:1.5rem;border-top:1px solid #f5f5f5;height:1px;background:none}.common-content b,.common-content h1,.common-content h2,.common-content h3,.common-content h4,.common-content h5,.common-content strong{font-weight:700}.common-content h1,.common-content h2{font-size:1.125rem;margin-bottom:.45rem}.common-content h3,.common-content h4,.common-content h5{font-size:1rem;margin-bottom:.45rem}.common-content p{font-weight:400;color:#353535;margin-top:.15rem}.common-content .orange{color:#ff5a05}.common-content .reference{font-size:1rem;color:#888}.custom-rich-content h1{margin-top:0;font-weight:400;font-size:15.25px;border-bottom:1px solid #eee;line-height:2.8}.custom-rich-content li,.custom-rich-content p{font-size:14px;color:#888;line-height:1.6}table.hljs-ln{margin-bottom:0;border-spacing:0;border-collapse:collapse}table.hljs-ln,table.hljs-ln tbody,table.hljs-ln td,table.hljs-ln tr{box-sizing:border-box}table.hljs-ln td{padding:0;border:0}table.hljs-ln td.hljs-ln-numbers{min-width:15px;color:rgba(27,31,35,.3);text-align:right;white-space:nowrap;cursor:pointer;user-select:none}table.hljs-ln td.hljs-ln-code,table.hljs-ln td.hljs-ln-numbers{font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace;font-size:12px;line-height:20px;vertical-align:top}table.hljs-ln td.hljs-ln-code{position:relative;padding-right:10px;padding-left:10px;overflow:visible;color:#24292e;word-wrap:normal;white-space:pre}video::-webkit-media-controls{overflow:hidden!important}video::-webkit-media-controls-enclosure{width:calc(100% + 32px);margin-left:auto}.button-cancel{color:#888;border:1px solid #888;border-radius:3px;margin-right:12px}.button-cancel,.button-primary{-ms-flex-positive:1;flex-grow:1;height:35px;display:inline-block;font-size:15px;text-align:center;line-height:36px}.button-primary{color:#fff;background-color:#ff5a05;border-radius:3px}@font-face{font-family:iconfont;src:url(//at.alicdn.com/t/font_372689_bwwwtosxtzp.eot);src:url(//at.alicdn.com/t/font_372689_bwwwtosxtzp.eot#iefix) format("embedded-opentype"),url(//at.alicdn.com/t/font_372689_bwwwtosxtzp.woff) format("woff"),url(//at.alicdn.com/t/font_372689_bwwwtosxtzp.ttf) format("truetype"),url(//at.alicdn.com/t/font_372689_bwwwtosxtzp.svg#iconfont) format("svg")}@font-face{font-family:player-font;src:url(//at.alicdn.com/t/font_509397_1cyjv4o90qiod2t9.eot);src:url(//at.alicdn.com/t/font_509397_1cyjv4o90qiod2t9.eot#iefix) format("embedded-opentype"),url(//at.alicdn.com/t/font_509397_1cyjv4o90qiod2t9.woff) format("woff"),url(//at.alicdn.com/t/font_509397_1cyjv4o90qiod2t9.ttf) format("truetype"),url(//at.alicdn.com/t/font_509397_1cyjv4o90qiod2t9.svg#player-font) format("svg")}.iconfont{font-family:iconfont!important;font-size:16px;font-style:normal;-webkit-font-smoothing:antialiased;-webkit-text-stroke-width:.2px;-moz-osx-font-smoothing:grayscale}html{background:#fff;min-height:100%;-webkit-tap-highlight-color:rgba(0,0,0,0)}body{width:100%}body.fixed{overflow:hidden;position:fixed;width:100vw;height:100vh}i{font-style:normal}a{word-wrap:break-word;-webkit-tap-highlight-color:rgba(0,0,0,0)}a:hover{text-decoration:none}.fade-enter-active,.fade-leave-active{transition:opacity .3s}.fade-enter,.fade-leave-to{opacity:0}.MathJax,.MathJax_CHTML,.MathJax_MathContainer,.MathJax_MathML,.MathJax_PHTML,.MathJax_PlainSource,.MathJax_SVG{outline:0}.ios-app-switch .js-audit{display:none}._loading_wrap_{position:fixed;width:100vw;height:100vh;top:50%;left:50%;transform:translate(-50%,-50%);z-index:999}._loading_div_class_,._loading_wrap_{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}._loading_div_class_{word-wrap:break-word;padding:.5rem .75rem;text-align:center;z-index:9999;font-size:.6rem;max-width:60%;color:#fff;border-radius:.25rem;-ms-flex-direction:column;flex-direction:column}._loading_div_class_ .message{color:#353535;font-size:16px;line-height:3}.spinner{animation:circle-rotator 1.4s linear infinite}.spinner *{line-height:0;box-sizing:border-box}@keyframes circle-rotator{0%{transform:rotate(0deg)}to{transform:rotate(270deg)}}.path{stroke-dasharray:187;stroke-dashoffset:0;transform-origin:center;animation:circle-dash 1.4s ease-in-out infinite,circle-colors 5.6s ease-in-out infinite}@keyframes circle-colors{0%{stroke:#ff5a05}to{stroke:#ff5a05}}@keyframes circle-dash{0%{stroke-dashoffset:187}50%{stroke-dashoffset:46.75;transform:rotate(135deg)}to{stroke-dashoffset:187;transform:rotate(450deg)}}.confirm-box-wrapper,.confirm-box-wrapper .mask{position:absolute;top:0;left:0;right:0;bottom:0}.confirm-box-wrapper .mask{background:rgba(0,0,0,.6)}.confirm-box-wrapper .confirm-box{position:fixed;top:50%;left:50%;width:267px;background:#fff;transform:translate(-50%,-50%);border-radius:7px}.confirm-box-wrapper .confirm-box .head{margin:0 18px;font-size:18px;text-align:center;line-height:65px;border-bottom:1px solid #d9d9d9}.confirm-box-wrapper .confirm-box .body{padding:18px;padding-bottom:0;color:#353535;font-size:12.5px;max-height:150px;overflow:auto}.confirm-box-wrapper .confirm-box .foot{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;padding:18px}.confirm-box-wrapper .confirm-box .foot .button-cancel{border:1px solid #d9d9d9}.hljs{display:block;overflow-x:auto;padding:.5em;color:#333;background:#f8f8f8}.hljs-comment,.hljs-quote{color:#998;font-style:italic}.hljs-keyword,.hljs-selector-tag,.hljs-subst{color:#333;font-weight:700}.hljs-literal,.hljs-number,.hljs-tag .hljs-attr,.hljs-template-variable,.hljs-variable{color:teal}.hljs-doctag,.hljs-string{color:#d14}.hljs-section,.hljs-selector-id,.hljs-title{color:#900;font-weight:700}.hljs-subst{font-weight:400}.hljs-class .hljs-title,.hljs-type{color:#458;font-weight:700}.hljs-attribute,.hljs-name,.hljs-tag{color:navy;font-weight:400}.hljs-link,.hljs-regexp{color:#009926}.hljs-bullet,.hljs-symbol{color:#990073}.hljs-built_in,.hljs-builtin-name{color:#0086b3}.hljs-meta{color:#999;font-weight:700}.hljs-deletion{background:#fdd}.hljs-addition{background:#dfd}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}




    </style>
<style type="text/css">
        .button-cancel[data-v-87ffcada]{color:#888;border:1px solid #888;border-radius:3px;margin-right:12px}.button-cancel[data-v-87ffcada],.button-primary[data-v-87ffcada]{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;height:35px;display:inline-block;font-size:15px;text-align:center;line-height:36px}.button-primary[data-v-87ffcada]{color:#fff;background-color:#ff5a05;border-radius:3px}.pd[data-v-87ffcada]{padding-left:1.375rem;padding-right:1.375rem}.article[data-v-87ffcada]{max-width:70rem;margin:0 auto}.article .article-unavailable[data-v-87ffcada]{color:#fa8919;font-size:15px;font-weight:600;line-height:24px;border-radius:5px;padding:12px;background-color:#f6f7fb;margin-top:20px}.article .article-unavailable .iconfont[data-v-87ffcada]{font-size:12px}.article .main[data-v-87ffcada]{padding:1.25rem 0;margin-bottom:52px}.article-title[data-v-87ffcada]{color:#353535;font-weight:400;line-height:1.65rem;font-size:1.34375rem}.article-info[data-v-87ffcada]{color:#888;font-size:.9375rem;margin-top:1.0625rem}.article-content[data-v-87ffcada]{margin-top:1.0625rem}.article-content.android video[data-v-87ffcada]::-webkit-media-controls-fullscreen-button{display:none}.copyright[data-v-87ffcada]{color:#b2b2b2;padding-bottom:20px;margin-top:20px;font-size:13px}.audio-player[data-v-87ffcada]{width:100%;margin:20px 0}.to-comment[data-v-87ffcada]{overflow:hidden;padding-top:10px;margin-bottom:-30px}.to-comment a.button-primary[data-v-87ffcada]{float:right;height:20px;font-size:12px;line-height:20px;padding:4px 8px;cursor:pointer}.article-comments[data-v-87ffcada]{margin-top:2rem}.article-comments h2[data-v-87ffcada]{text-align:center;color:#888;position:relative;z-index:1;margin-bottom:1rem}.article-comments h2[data-v-87ffcada]:before{border-top:1px dotted #888;content:"";position:absolute;top:56%;left:0;width:100%;z-index:-1}.article-comments h2 span[data-v-87ffcada]{font-size:15.25px;font-weight:400;padding:0 1rem;background:#fff;display:inline-block}.article-sub-bottom[data-v-87ffcada]{z-index:10;cursor:pointer}.switch-btns[data-v-87ffcada]{height:76px;cursor:pointer;padding-top:24px;padding-bottom:24px;border-bottom:10px solid #f6f7fb;position:relative}.switch-btns[data-v-87ffcada]:before{content:" ";height:1px;background:#e8e8e8;position:absolute;top:0;left:0;-webkit-box-sizing:border-box;box-sizing:border-box;left:1.375rem;right:1.375rem}.switch-btns .btn[data-v-87ffcada]{height:38px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.switch-btns .btn .tag[data-v-87ffcada]{-webkit-box-flex:0;-ms-flex:0 0 62px;flex:0 0 62px;text-align:center;color:#888;font-size:14px;border-radius:10px;height:22px;line-height:22px;background:#f6f7fb;font-weight:400}.switch-btns .btn .txt[data-v-87ffcada]{margin-left:10px;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;color:#888;font-size:15px;height:22px;line-height:22px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:400}@media (max-width:769px){.article .breadcrumb[data-v-87ffcada]{padding-top:10px;padding-bottom:10px}}





    </style>
<style type="text/css">
        .comment-item{list-style-position:inside;width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;margin-bottom:1rem}.comment-item a{border-bottom:none}.comment-item .avatar{width:2.625rem;height:2.625rem;-ms-flex-negative:0;flex-shrink:0;border-radius:50%}.comment-item .info{margin-left:.5rem;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.comment-item .info .hd{width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.comment-item .info .hd .username{color:#888;font-size:15.25px;font-weight:400;line-height:1.2}.comment-item .info .hd .control{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.comment-item .info .hd .control .btn-share{color:#888;font-size:.75rem;margin-right:1rem}.comment-item .info .hd .control .btn-praise{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:15.25px;text-decoration:none}.comment-item .info .hd .control .btn-praise i{color:#888;display:inline-block;font-size:.75rem;margin-right:.3rem;margin-top:-.01rem}.comment-item .info .hd .control .btn-praise i.on,.comment-item .info .hd .control .btn-praise span{color:#ff5a05}.comment-item .info .bd{color:#353535;font-size:15.25px;font-weight:400;white-space:normal;word-break:break-all;line-height:1.6}.comment-item .info .time{color:#888;font-size:9px;line-height:1}.comment-item .info .reply .reply-hd{font-size:15.25px}.comment-item .info .reply .reply-hd span{margin-left:-12px;color:#888;font-weight:400}.comment-item .info .reply .reply-hd i{color:#ff5a05;font-size:15.25px}.comment-item .info .reply .reply-content{color:#353535;font-size:15.25px;font-weight:400;white-space:normal;word-break:break-all}.comment-item .info .reply .reply-time{color:#888;font-size:9px}




    </style>
</head>
<body>
<div id="app">
<div class="article" data-v-87ffcada="" id="watermark">

<div class="main main-app" data-v-87ffcada="">
<h1 class="article-title pd" data-v-87ffcada="">
                28讲如何深度定制自己的主题
            </h1>
<div class="article-content typo common-content pd" data-v-87ffcada=""><img data-v-87ffcada="" src="https://static001.geekbang.org/resource/image/a7/ec/a7ceea588204e04ceb2dbb2e3b9633ec.jpg"/>
<div class="" data-v-87ffcada="" id="article-content">
<div class="text">
<p>前面我们在“工作区”模块中介绍过，如何通过快捷键快速地隐藏和显示 VS Code 的某个 UI 组件，比如隐藏状态栏、活动栏、侧边栏等等。但是如何固定住某个 UI 组件，以及如何修改各个 UI 组件的颜色、边框等等，我们都还没有涉及，今天我们将逐一介绍。</p><h2>固定 UI 视图</h2><p>首先我们可以做的，就是持久化 UI 视图，这句话是什么意思呢？VS Code 的各种 “切换 xyz 视图可见性” 的命令，它<strong>最终都是将这个配置写到了你的个人设置中</strong>。比如说，我们运行 “切换状态栏可见性”（Toggle Status Bar Visibility），然后再打开个人设置 （JSON），我们可以在设置中找到这样一条：</p><pre><code>"workbench.statusBar.visible": false,
</code></pre><p>这个配置也非常好理解，它是表达：statusBar（状态栏）并不是 visibile （可见）的。</p><p>再比如，你可以将侧边栏显示在右侧，像 Visual Studio 里那样，你可以运行 “切换边栏位置”（Toggle Side Bar Position）。</p><p><img alt="" src="https://static001.geekbang.org/resource/image/24/d9/2407b4f3f24afa8f9c2eea42844173d9.gif"/></p><center><span class="reference">切换侧边栏位置</span></center><p>完成这样的命令后，个人设置里就会多出下面这条设置：</p><pre><code>"workbench.sideBar.location": "right"
</code></pre><p>还有就是搜索视图的位置，你可以运行“切换搜索视图位置”命令。</p><p><img alt="" src="https://static001.geekbang.org/resource/image/c8/4a/c81210a1dcef6c500b1d0d9a4ab6424a.gif"/></p><center><span class="reference">切换搜索视图位置</span></center><p>VS Code 就会在设置里添加如下代码：</p><!-- [[[read_end]]] --><pre><code>"search.location": "panel"
</code></pre><p>相信通过这三个例子，你就可以了解如何在你的不同设备之间共享 UI 设置了。通过设置来控制 UI 最棒的地方在于，你<strong>可以为不同的项目指定不同的设置</strong>。比如你可以在自己的个人设置里，将状态栏、侧边栏等都隐藏，这样当你打开一个新窗口时，或者只是编辑单个文件时，你不需要用到它们，自然也就不需要显示它们。而当你打开了某个项目时，可以由这个项目的情况来决定是否要将它们打开。比如说这个项目用了 Git，那么将侧边栏展示出来可能会更方便一些。</p><h2>修改工作区配色</h2><p>持久化 UI 视图设置是 VS Code 定制的第一步，而第二步就是修改工作区里各个视图的配色了。相信你早就在插件市场下载过各种主题然后使用了，但其实自己修改主题颜色也非常简单，甚至不要求你有任何的编程知识。</p><p>首先，运行命令 “打开设置（JSON）”去打开个人设置。</p><p>然后你在编辑器里输入 “workbench.colorCustomizations"，这时候，VS Code 的自动补全就会给你两个提示项了，第一个是：</p><pre><code>{
        "statusBar.background": "#666666",
        "panel.background": "#555555",
        "sideBar.background": "#444444"
}
</code></pre><p>第二个是 {} 。当你选择第一个提示项，此时这个配置是这样的：</p><pre><code>"workbench.colorCustomizations": {
        "statusBar.background": "#666666",
        "panel.background": "#555555",
        "sideBar.background": "#444444"
}
</code></pre><p>workbench.colorCustomizations 有很多属性，它们的键（key）就是代表着各个组件的属性，在示例里，它们是：</p><ul>
<li>statusBar.background，状态栏背景色</li>
<li>panel.background，面板背景色</li>
<li>sideBar.background，侧边栏背景色</li>
</ul><p>而它们的值则是颜色的 HEX 值。此时当你保存文件后，你会发现 VS Code 发生了变化。</p><p><img alt="" src="https://static001.geekbang.org/resource/image/ff/88/ffd4ee95d1fbfe7871abdc19132aca88.png"/></p><center><span class="reference">修改工作区颜色</span></center><p>没错，上面提到的这三个组件的背景色都立刻发生了变化。而你在设置里添加的这三组键值（key-value pair），跟主题插件里的书写方式一模一样。</p><p>已经知道了去哪里书写这些颜色配置，下面就是要知道有哪些可以修改的值了。最简单的方式当然是通过自动补全。</p><p><img alt="" src="https://static001.geekbang.org/resource/image/f4/cc/f42465aab54c7b7da1ebab4692c216cc.gif"/></p><center><span class="reference">颜色修改自动补全</span></center><p>VS Code 自动补全列表提供了所有可以修改的颜色，而如果你希望对此有个全的了解再进行书写，你也可以阅读<a href="https://code.visualstudio.com/docs/getstarted/theme-color-reference">官方文档</a>。</p><h2>修改编辑器配色</h2><p>除了工作区的配色，你也可以修改编辑器内代码的颜色。这个就真的强大了，因为为代码书写语法文件和配色文件，都是非常复杂的，但是在 VS Code 中，你依然有非常简单的方式去完成部分修改。</p><h3>1、基本类型颜色修改</h3><p>首先，你要做的，就是知道你想要修改的代码，是属于什么基本类型。你可以将光标移动到某段你想要修改颜色的代码上，比如将光标移动到一段字符串上，</p><p><img alt="" src="https://static001.geekbang.org/resource/image/dc/16/dcefe52597db44400524b717f97b5a16.png"/></p><p>然后，在命令面板里运行 “检查TM作用域”（Inspect TM Scopes）命令。</p><p><img alt="" src="https://static001.geekbang.org/resource/image/58/08/5828bb8496b89124e97f88dcfde6a808.gif"/></p><center><span class="reference">Inspect TM Scopes</span></center><p>此时，编辑器中出现一个新的悬浮窗。这个窗口里呈现的，就是当前这个代码片段所对应的语言、语法类型以及当前的颜色和背景色等。</p><p><img alt="" src="https://static001.geekbang.org/resource/image/3a/62/3a93669f126596e9e2c645825d37f162.png"/></p><center><span class="reference">语法信息</span></center><p>比如在上图里，这个窗口呈现了以下信息：</p><ul>
<li>当前的 token 是 hello，它的类型是 String；</li>
<li>它的颜色是 #ce9178ff ，背景色是 #1e1e1eff；</li>
<li>它所属的语法作用域由内而外分别是 string.quoted.double.js，meta.var.expr.js，source.js。</li>
</ul><p>如果你想要将所有字符串都变成红色，那么就需要修改String这个作用域的颜色。下面，你可以再次打开个人设置（JSON），输入 editor.tokenColorCustomizations；</p><p><img alt="" src="https://static001.geekbang.org/resource/image/46/89/46a36ba08a9047361c06958c6fa1ed89.gif"/></p><center><span class="reference">修改编辑器内代码颜色</span></center><p>然后把光标放入这个 JSON 对象中，按下 “Ctrl + Space” 触发建议列表，就能够看到如下的建议。</p><p><img alt="" src="https://static001.geekbang.org/resource/image/53/4e/537cf7659c3a7a7c07aee38f5dbcf64e.gif"/></p><center><span class="reference">编辑器颜色修改自动补全</span></center><p>建议列表中首先出现的，就是你可以在 VS Code 中使用的所有的主题的名字。通过选择它们，你可以只覆盖某个主题中的某个颜色。这里你可以滚动这个列表，看看下面还有别的什么建议。</p><p><img alt="" src="https://static001.geekbang.org/resource/image/72/29/729280ff4e99417301f3a993a1183d29.png"/></p><p>你可以看到如下几个选项：</p><ul>
<li>comments 代表着注释的颜色；</li>
<li>functions 代表着函数的寒色；</li>
<li>keywords 代表着关键字的颜色；</li>
<li>numbers 代表着数字的颜色；</li>
<li>strings 代表着字符串的颜色；</li>
<li>types 代表着类型的颜色；</li>
<li>variables 代表着变量的颜色；</li>
<li>textMateRules 我下面会再介绍。</li>
</ul><p>为了修改字符串的颜色，你只需选择 strings 即可，然后将其修改为红色，也就是：</p><pre><code>    "editor.tokenColorCustomizations": {
        "strings": "#FF0000",
    }
</code></pre><p>保存设置后，你再回到刚才的 JavaScript 文件时，就可以看到字符串颜色都变了。</p><p><img alt="" src="https://static001.geekbang.org/resource/image/8c/4b/8ca34737bdd7a6490403d3455699784b.png"/></p><center><span class="reference">字符串颜色修改为红色</span></center><h3>2、TextMate 规则修改</h3><p>在上面的建议列表里，还有个 textMateRules选项，这个属性是做什么用的呢？让我们再来看下刚才在 JavaScript 文件里运行 “Inspect TM Scopes” 看到的信息。</p><p><img alt="" src="https://static001.geekbang.org/resource/image/3a/62/3a93669f126596e9e2c645825d37f162.png"/></p><center><span class="reference">语法信息</span></center><p>在这个窗口的最下方，就是 TextMate 的语法规则作用域了。hello 这个词所处的 TextMate 语法作用域<strong>由内而外</strong>分别是 string.quoted.double.js，meta.var.expr.js，source.js。VS Code 的主题插件在配置编辑器内代码的颜色时，就是针对这些作用域进行设置的。而你要修改某个作用域所对应的颜色，就是在设置中修改 textMateRules 。</p><p>比如说，你只想修改双引号内的字符串的颜色为红色，其他的字符串都不修改，那么就需要修改 string.quoted.double.js 这个作用域的颜色。</p><p><img alt="" src="https://static001.geekbang.org/resource/image/f3/da/f33fda0ac27b97447be6491bdca617da.gif"/></p><center><span class="reference">textMateRules 模板</span></center><p>在上面的动图里， 你可以看到：输入引号，然后自动补全填入了 TextMate 语法设置的模板，这之后，再将 scope 的值修改成了 string.quoted.double.js 。保存设置后，当你再次打开之前的 JavaScript 文件，</p><p><img alt="" src="https://static001.geekbang.org/resource/image/54/e8/54353192c90935e20e0c756b8ac89ee8.png"/></p><center><span class="reference">双引号内字符串为红色</span></center><p>“hello” 是红色的，但是如果你输入</p><pre><code>var b = 'hello'
</code></pre><p>单引号内的 hello 依然是原来的颜色。</p><h2>基于某个主题修改配色</h2><p>上面我们提到了，当你自定义编辑器内配色时，自动补全给你提示了所有已经安装的主题。</p><p><img alt="" src="https://static001.geekbang.org/resource/image/53/4e/537cf7659c3a7a7c07aee38f5dbcf64e.gif"/></p><center><span class="reference">编辑器颜色修改自动补全</span></center><p>通过选择这些主题，你可以只针对它们做颜色修改，而不影响其他的主题的颜色。工作区的颜色修改也是如此。比如说，你想修改 Monokai 的某个颜色定义，那么你可以这么写：</p><pre><code> "workbench.colorCustomizations": {
        "[Monokai]": {
            "statusBar.background": "#666666",
            "panel.background": "#555555",
            "sideBar.background": "#444444"
        },
 }
</code></pre><p>而相应的编辑器颜色修改则是：</p><pre><code>"editor.tokenColorCustomizations": {
        "[Monokai]": {
            "strings": "#FF0000"
        }
}
</code></pre><p>是不是非常方便呢？</p><h2>取色器 Color Picker</h2><p>在前面介绍 HTML、CSS 的功能时，我介绍过可以在 HTML 和 CSS 中使用取色器来修改颜色。同样的，在 JSON 文件中，你也可以使用取色器来修改。</p><p><img alt="" src="https://static001.geekbang.org/resource/image/2c/15/2c171a5183373cc96992d7e2c8636515.gif"/></p><center><span class="reference">使用取色器修改颜色</span></center><p>在上图中，我因为开启了文件自动保存，设置文件会自动保存然后触发颜色的更新，所以当我使用取色器修改颜色后，稍等片刻，就能看到这个颜色在编辑器中的效果了。</p><h2>小结</h2><p>好了，以上就是我们今天内容的全部了。要说我最喜欢今天内容的哪个部分，那就是在设置中使用取色器和自动更新了，有了它们，我可以修改大部分 VS Code 组件的颜色，也可以修改编辑器内代码的颜色，同时还能实时地预览，可以说不会编程也能够轻松自定义 VS Code 的主题了。你是不是也想动手试一试了呢？</p><hr/><p><img alt="" src="https://static001.geekbang.org/resource/image/92/06/92862660523add24b3168f22954fa506.jpg"/></p>
</div>
</div>
</div>
<div class="article-comments pd" data-v-87ffcada=""><h2 data-v-87ffcada=""><span data-v-87ffcada="">精选留言</span></h2>
<ul data-v-87ffcada="">
<li class="comment-item" data-v-87ffcada=""><img class="avatar" src="https://static001.geekbang.org/account/avatar/00/11/c1/f0/46ce29c2.jpg"/>
<div class="info">
<div class="hd"><span class="username">xiasharp</span>
</div>
<div class="bd">有没有感觉深色主题时，光标不好看到，不知道大家怎么解决的 <br/></div>
<span class="time">2018-11-20 23:13</span>
</div>
</li>
<li class="comment-item" data-v-87ffcada=""><img class="avatar" src="https://static001.geekbang.org/account/avatar/00/11/b3/26/cc28a05a.jpg"/>
<div class="info">
<div class="hd"><span class="username">悬炫</span>
</div>
<div class="bd">一直在寻找如何修改 已选项在列表或树非活动时的背景颜色 的解决方案，大神的这边文章让我瞬间顿悟，厉害了 <br/></div>
<span class="time">2018-11-18 15:19</span>
</div>
</li>
<li class="comment-item" data-v-87ffcada=""><img class="avatar" src="https://static001.geekbang.org/account/avatar/00/12/bd/ec/cc7abf0b.jpg"/>
<div class="info">
<div class="hd"><span class="username">L</span>
</div>
<div class="bd">最近这个版本的vscode在mac上感觉出了问题。习惯性卡死 <br/></div>
<span class="time">2018-11-16 08:51</span>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>